<template>
	<view class="enroll">
		<view class="enroll_head">
			<view class="back" @click="navigateBack()">
			</view>
			<view class="head_wrap">
				<view class="tip">
					淘气游杯永劫无间水友赛免费报名，奖金如下
				</view>
				<view class="flex wrap_inner">
					<view class="box">
						<view class="line">
							<text class="fontb">第二名</text>
							<text class="font20">200元现金</text>
						</view>
					</view>
					<view class="box_2">
						<view class="line">
							<text class="fontb4">第一名</text>
							<text class="font24">500元现金</text>
						</view>
					</view>
					<view class="box box_3">
						<view class="line">
							<text class="fontb">第三名</text>
							<text class="font20">100元现金</text>
						</view>
					</view>
				</view>
				<button class="enroll_btn" @click="show =true">立即报名</button>
			</view>
		</view>
		<view class="enroll_content">
			<view class="enroll_title">
				活动规则
			</view>
			<view class="sub_title ">
				活动说明
			</view>
			<view class="flex pd10">
				<view class="num">
					1
				</view>
				<view class="text">
					本次直播由永劫无间主播十又全程解说，参赛选手须提前20 分钟进入比赛房间，迟到则取消报名资格，由解说在直播间 随机抽取玩家参赛。。
				</view>
			</view>
			<view class="flex pd10">
				<view class="num">2</view>
				<view class="text">
					全程不允许使用第三方非法软件。
				</view>
			</view>
			<view class="flex pd10">
				<view class="num">3</view>
				<view class="text">
					比赛游戏为永劫无间国服，选手需自行准备参赛账号。
				</view>
			</view>
			<view class="sub_title">
				直播说明
			</view>
			<view class="text">
				本场比赛全程直播，抖音搜索“淘气游杯永劫无间水友赛”
			</view>
			<view class="sub_title">
				比赛时间
			</view>
			<view class="card flex">
				<view class="text2">
					点击并扫描右侧二维码添加工作人员 拉群，群内公布比赛时间以及房间号
				</view>
				<image class="code" src="../../static/buy/qb.png" mode="aspectFill"></image>
			</view>
			<view class="flex card alCenter">
				<image class="copy_img" src="../../static/active/icon_tip@2x.png" mode="aspectFill"></image>
				此活动最终解释权归淘气游App所有
			</view>
		</view>
		<view class="mypopup" v-show="show">
			<view class="mypopup-inner">
				<view class="mypopup-text">
					<form class="form" catchsubmit="formSubmit" catchreset="formReset" >
						<view class="page-section ">
							<view class="page-section-title">
								请输入比赛场次
								<text class="fontc">＊</text>
							</view>
							<input class="weui-input" name="count" placeholder="请输入" />
						</view><view class="page-section ">
							<view class="page-section-title">
								请输入游戏ID
								<text class="fontc">＊</text>
							</view>
							<input class="weui-input" name="ID" placeholder="请输入" />
						</view>
						<view class="page-section ">
							<view class="page-section-title">
								请输入手机号码
								<text class="fontc">＊</text>
							</view>
							<input class="weui-input" name="phone" placeholder="请输入" />
						</view>
						<view class="page-section ">
							<view class="page-section-title">
								请输入微信号
								<text class="fontc">＊</text>
							</view>
							<input class="weui-input" name="wxId" placeholder="请输入" />
						</view>
						
						<view class=" page-section flex">
							<button class="cancle_btn" formType="reset" @click="show =false">取消</button>
							<button class="confim_btn" type="primary" formType="submit">报名</button>
						</view>
					</form>
				</view>
				<button class="closeBtn" @click="show=false"></button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		onPageScroll(e) {

		},
		onLoad() {

		},
		onShow() {},
		methods: {

		}
	}
</script>
<style>
	page {

		background: linear-gradient(180deg, #360201 0%, rgba(255, 255, 255, 0) 100%);
		background: rgba(0, 0, 0, 0.4);
	}
</style>
<style lang="scss" scoped>
	.enroll {
		height: 534rpx;

		.enroll_head {
			height: 720rpx;
			background: url(~@/static/active/bg_2@2x.png) no-repeat;
			background-size: 100%;
			padding-top: 100rpx;

			.back {
				display: block;
				height: 30px;
				width: 30px;
				margin-left: 25rpx;
				background: url(~@/static/active/icon_back@2x.png) no-repeat;
				background-size: 100%;
			}

			.head_wrap {
				height: 446rpx;
				margin: 160rpx 25rpx 25rpx 25rpx;
				padding: 35rpx;
				background: url(~@/static/active/bg_wrap@2x.png) no-repeat;
				background-size: 100%;

				.tip {
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					line-height: 42rpx;
				}

				.enroll_btn {
					width: 530rpx;
					background: url(~@/static/active/icon_enroll@2x.png) no-repeat;
					background-size: 100%;
				}

				.wrap_inner {
					justify-content: space-around;
					align-items: flex-end;
					margin: 85rpx 85rpx 10rpx 55rpx;
				}

				.line {
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.44);
					text-align: center;
					padding: 10rpx 0;
				}

				.box {
					padding: 15rpx;
					width: 136rpx;
					height: 132rpx;
					background: linear-gradient(137deg, #CBE0F0 0%, #778EBC 100%);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}

				.box_2 {
					padding: 15rpx;
					width: 160rpx;
					height: 152rpx;
					margin: 0 12rpx;
					background: linear-gradient(137deg, #F9DD8B 0%, #FFAD2E 100%);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}

				.box_3 {
					background: linear-gradient(137deg, #FBC8B1 0%, #E86653 100%);
				}

				.font20 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 52rpx;
				}

				.fontb {
					display: block;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #4E260A;
					line-height: 52rpx;
				}

				.fontb4 {
					display: block;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #4E260A;
					line-height: 62rpx;
					padding-top: 15rpx;
				}

				.font24 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 52rpx;
				}
			}
		}

		.enroll_content {
			background: #FFFFFF;
			position: relative;
			padding: 0 35rpx 85rpx 35rpx;

			&::after {
				content: "";
				position: absolute;
				top: -30rpx;
				left: 0;
				right: 0;
				width: 100%;
				height: 30rpx;
				background-color: #FFFFFF;
				border-radius: 60rpx 60rpx 0px 0rpx;
			}

			.enroll_title {
				margin: 0 auto;
				width: 334rpx;
				height: 70rpx;
				background: url(~@/static/active/title_bg2@2x.png) no-repeat;
				background-size: 100%;
				text-align: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFF1A3;
				line-height: 63rpx;
				letter-spacing: 2px;
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
				text-align: center;

			}

			.sub_title {
				margin: 25rpx 0;
				width: 180rpx;
				height: 60rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 53rpx;
				background: url(~@/static/active/sub_title@2x.png) no-repeat;
				background-size: 100%;
			}

			.pd10 {
				margin-bottom: 20rpx;
			}

			.alCenter {
				align-items: center;
				font-size: 24rpx;
				color: #6C6C6C;
			}

			.num {
				display: block;
				margin-right: 20rpx;
				height: 40rpx;
				display: block;
				padding-right: 35rpx;
				padding: 0 12rpx;
				color: white;
				text-align: center;
				background: #EA5640;
				border-radius: 50%;
			}

			.text {
				font-weight: 500;
				font-size: 24rpx;
				color: #6C6C6C;
				line-height: 34rpx;
			}

			.card {
				background: #FFFDF6;
				padding: 25rpx;
				margin-bottom: 20rpx;
				border-radius: 40rpx 40rpx 0rpx 0rpx;

				.code {
					flex: 1;
					width: 158rpx;
					height: 154rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 8rpx solid #FFD66C;
					margin-left: 85rpx;
				}

				.text2 {
					font-size: 24rpx;
					color: #6C6C6C;
					flex: 2;
				}

				.copy_img {
					width: 33rpx;
					height: 33rpx;
				}
			}
		}

		.mypopup {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.4);
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.mypopup-inner {

			padding: auto 35rpx;

			.mypopup-text {
				background: url(~@/static/active/dialog@2x.png) no-repeat;
				background-size: 100%;
				width: 640rpx;
				padding-top: 105rpx;
				.form {
					width: 640rpx;
					padding: 35rpx;
					.page-section {
						margin: 30rpx 35rpx;
						.page-section-title {
							font-weight: 500;
							font-size: 28rpx;
							color: #22150B;
							line-height: 50rpx;
						}
						.fontc {
							color: red;
						}
						.weui-input {
							width: 568rpx;
							height: 72rpx;
							background: #FFFDF3;
							text-indent: 20rpx;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
						}
						.cancle_btn {
							font-weight: 500;
							font-size: 28rpx;
							color: #FF9300;
							width: 176rpx;
							height: 88rpx;
							line-height: 80rpx;
							border-radius: 112rpx 112rpx 112rpx 112rpx;
							border: 4rpx solid #FFBA34;
						}
						.confim_btn {
							width: 372rpx;
							height: 88rpx;
							font-weight: bold;
							font-size: 32rpx;
							color: #FFF7E1;
							background: url(~@/static/active/confim_btn@2x.png) no-repeat;
							background-size: 100%;
						}
					}
				}
			}
		}

		.closeBtn {
			background: url(@/static/active/close@2x.png) no-repeat;
			background-size: 100%;
			width: 68rpx;
			height: 68rpx;
			margin-top: 55rpx;
		}
	}
</style>
